customElements.define('xs-custom-demo1', class extends HTMLElement {
  constructor() {
    super()
  }

  connectedCallback () {
    const dataset = this.dataset

    const shadow = this.attachShadow({ mode: 'open' })
    console.log('shadow :>> ', shadow);

    this.templates = document.createElement('div')
    this.templates.innerHTML = `
      <div class="xs-artical">
        <div class="xs-artical__img">
          <img src="${dataset.picture}">
        </div>

        <div class="xs-artical__user">
          <div class="xs-artical__user-avatar">
            <img src="${dataset.avatar}" alt="">
          </div>
          <div>
            <div class="xs-artical__user-name">${dataset.name}</div>
            <div class="xs-artical__user-time">${dataset.time} ${dataset.location}</div>
          </div>
        </div>

        <div class="xs-artical__desc">${dataset.desc}</div>
      </div>
    `

    this.styles = document.createElement('style')
    this.styles.innerHTML = `
      :host {
        display: inline-block;
        border: 3px solid red;
        box-sizing:border-box;
        width:50vw;
      }

      :host([green]) {
        border-color: green;
      }

      :host {
        all: initail
      }

      .xs-artical {
        margin: 30px;
        padding: 15px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        overflow: hidden;
      }

      .xs-artical__img {
        margin-top: -30px;
        margin-right: -30px;
        margin-left: -30px;
      }

      .xs-artical__img img {
        width: 100%;
        display: block;
      }

      .xs-artical__user {
        display: flex;
        align-items: center;
        margin-top: 15px;
      }

      .xs-artical__user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 30px;
        overflow: hidden;
        margin-right: 15px;
      }

      .xs-artical__user-avatar img {
        width: 100%;
        height: 100%;
      }

      .xs-artical__user-name {
        font-size: 12px;
        color: #999;
      }

      .xs-artical__user-time {
        font-size: 12px;
        color: #999;
      }

      .xs-artical__desc {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 15px;
      }
    `
    // this.appendChild(this.templates)
    // this.appendChild(this.styles)
    this.shadowRoot.appendChild(this.templates)
    this.shadowRoot.appendChild(this.styles)
  }
})
